<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title class="optionCaption">JsCIN Options</title>
    <link rel="stylesheet" href="options.css" type="text/css"/>
    <link href="../jquery/css/jquery-ui.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript" src="../jquery/jquery-ui.js"></script>
    <script type="text/javascript" src="../jscin/cin_parser.js"></script>
    <script type="text/javascript" src="../jscin/gtab_parser.js"></script>
    <script type="text/javascript" src="options.js"></script>
    <script type="text/javascript" src="drive.js"></script>
  </head>
  <body>
    <h1 class="optionCaption"></h1>
    <div id="accordion">

      <h3 class="optionInputMethodTables"></h3>
      <div>
        <div class="optionHowToEnableTables" style="font-weight: bold;"></div>
        <br/>
        <div style="float: left;">
        <span class="optionEnabledTables"></span>
        <ul id="enabled_im_list" class="sortable">
        </ul>
        </div>
        <div style="float: left;">
        <span class="optionAvailableTables"></span>
        <ul id="available_im_list" class="sortable">
        </ul>
        </div>
        <p class="optionAddTables" style="clear: both;"></p>
        <button class="optionAddUrl"></button><br/>
        <button class="optionAddFile"></button><br/>
        <button class="optionAddDrive"></button><br/>
        <!-- TODO(hungte) Make this a progress bar. -->
        <div id="add_table_status"></div>
      </div>
      <h3 class="optionGeneral"></h3>
      <div>

      <input type="checkbox" id="checkSupportNonChromeOS"></input>
      <label for="checkSupportNonChromeOS" class="optionSupportNonChromeOS">
      </label><br/>

      &nbsp;&nbsp;<input type="checkbox" id="checkDefaultEnabledNonCros"></input>
      <label for="checkDefaultEnabledNonCros"
             class="optionDefaultEnabledNonCros">
      </label><br/>

      <input type="checkbox" id="checkPunctuations"></input>
      <label for="checkPunctuations" class="optionPunctuations">
      </label><br/>

      <input type="checkbox" id="checkRelatedText"></input>
      <label for="checkRelatedText" class="optionRelatedText">
      </label><br/>

      </div>

      <h3 class="optionDebug"></h3>
      <div>
        <p>
        <form><span class="optionSelectDefaultInputModule"></span>&nbsp;
        <span id="formSelectModule"></span></form>
        </p>
        <p>
        <span class="optionSandbox"></span>&nbsp;
        <a id="start_dumb_ime" href="../test/dumbime.html">Dumb IME</a>
        <a id="start_test_area" href="../test/testarea.html">Test Area</a>
        </p>
        <p>
        <input type="checkbox" id="checkDebugMessage"></input>
        <label for="checkDebugMessage" class="optionDebugMessage"></label>
        </p>
      </div>

    </div><!-- end of accordion -->

    <!-- start of dialog definitions -->
    <div style="display: none;">
      <div id="new_add_table_dialog">
      Select your input source
       - Remote URL
       - Local File
       - My Google Drive

       Next
      </div>

      <div id="load_table_dialog">
       - progress
      </div>

      <div id="select settings">
       - type
      </div>

      <div id="add_table_dialog">
        <p>
          <div id="url_div">
            <input type=text id="cin_table_url_input" size="80"
                   placeholder="Enter a URL"></input>
            <br/>
          </div>
          <div id="file_div">
            <input type=file id="cin_table_file_input"></input>
          </div>
          <div id="doc_div">
            <p id="doc_status"></p>
            <div id="doc_list"></div>
          </div>
        </p>
        <p>
          <label class="optionSettingChoices"></label>
          <select id="add_table_setting"></select>
        </p>
        <p id="save_to_drive_input">
          <input type=checkbox id="save_to_drive">
          <label for="save_to_drive" class="optionSaveToDrive"></label>
          <span id="auth_status"></span>
        </p>
      </div>

      <div id="table_detail_dialog">
        <span class="optionTableDetail"></span><br/>
        <span class="optionTableDetailNameHeader"></span>
        <span class="optionTableDetailName"></span><br/>
        <span class="optionTableDetailTypeHeader"></span>
        <span class="optionTableDetailType"></span><br/>
        <span class="optionTableDetailSourceHeader"></span>
        <span class="optionTableDetailSource"
              style="word-wrap: break-word; word-break: break-all;"></span><br/>
        <p>
          <input type="checkbox" class="optionQueryKeystrokesCheckbox" id="query_keystrokes">
          <label for="query_keystrokes" class="optionQueryKeystrokes"></label>
        </p>
      </div>

      <div id="dialog_alert_change_support_non_chromeos">
        <p><span class="ui-icon ui-icon-alert"
            style="float: left; margin: 0 7px 20px 0;"></span>
        <span class="optionAlertChangeSupportNonChromeOS"></span>
        </p>
      </div>

    </div><!-- end of dialogs definition. -->

  </body>
</html>
